<template>
  <v-chart :option="option" autoresize :loading="load" class="pack"/>
</template>

<script>
import {ref, defineComponent} from "vue";
import * as echarts from 'echarts';
export default defineComponent({
  //堆叠图
  name: "StackBarChart",
  data(){
    let option = {
      backgroundColor:'#15243900',
      tooltip: {
        axisPointer: {
          type: "shadow",
          color: "#fff"
        },
      },
      grid: {
        top: 'middle',
        left: '2%',
        right: '9%',
        bottom: '5%',
        height: '72%',
        containLabel: true,
        color: "#fff"
      },
      legend: {
        icon: 'circle',
            right: '4%',
            top: '8%',
            color: '#90979c',
            data: ['一级', '二级', '三级']
      },
      calculable: true,
      xAxis: [{
        type: "value",
        trigger: "axis",
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitArea: {
          show: false
        },
        axisLabel: {
          interval: 0,
        },
        data: [1,2,3,4,5,6,7,8,9,10,11,12],
      }],
      yAxis: [{
        "type": "category",
        "splitLine": {
          "show": false
        },
        "axisLine": {
          lineStyle: {
            color: '#fff'
          }
        },
        "axisTick": {
          "show": false
        },
        "axisLabel": {
          "interval": 0,

        },
        "splitArea": {
          "show": false
        },
        data: ['一级', '二级', '三级', '四级', '五级'],
      }],
      series: [{
        "name": "一级",
        "type": "bar",
        "stack": "总量",
        "barMaxWidth": 15,
        "barGap": "10%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            offset: 0,
            color: 'rgba(245,221,111,1)'
          }, {
            offset: 1,
            color: 'rgba(245,221,111,0)'
          }]),
          borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            offset: 0,
            color: 'rgba(245,221,111,1)'
          }, {
            offset: 1,
            color: 'rgba(245,221,111,0)'
          }]),
        },
        data: [709, 1917, 2455, 2610, 1719],
      },
        {
          "name": "二级",
          "type": "bar",
          "stack": "总量",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              offset: 0,
              color: 'rgba(24,191,207,1)'
            }, {
              offset: 1,
              color: 'rgba(24,191,207,0)'
            }]),
            borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              offset: 0,
              color: 'rgba(24,191,207,1)'
            }, {
              offset: 1,
              color: 'rgba(24,191,207,0)'
            }]),
          },
          data: [327, 1776, 507, 1200, 800]
        },
        {
          "name": "三级",
          "type": "bar",
          "stack": "总量",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              offset: 0,
              color: 'rgba(98,113,228,1)'
            }, {
              offset: 1,
              color: 'rgba(40,54,117,0)'
            }]),
            borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              offset: 0,
              color: 'rgba(98,113,228,1)'
            }, {
              offset: 1,
              color: 'rgba(40,54,117,0)'
            }]),
            borderRadius: 0,
          },
          data: [327, 1776, 507, 1200, 800]
        }
      ]
    }
    let load = false
    return{
      load:ref(load),
      option:ref(option)
    }
  }
})
</script>

<style scoped>

</style>